<template>
  <div class="recordPage">
    <div class="filterVue">
      <div style="display: flex">
        <div class="filter">
          <span style="padding-right: 10px">会话来源</span>
          <el-select v-model="params.source" placeholder="请选择">
            <el-option v-for="item in sources" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="filter">
          <span style="padding-right: 10px">客户评分</span>
          <el-select v-model="params.evaluationRating" placeholder="请选择">
            <el-option
              v-for="item in evaluationRatings"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="filter">
          <span style="padding-right: 10px">日期搜索</span>
          <el-select v-model="params.timeType" placeholder="请选择">
            <el-option v-for="item in dateTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-date-picker
            v-model="daterange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            style="width: 320px; margin-left: 10px"
          >
          </el-date-picker>
        </div>
        <div class="filter">
          <div style="padding-right: 10px">关键字</div>
          <el-select v-model="params.keywordType" placeholder="请选择" style="width: 190px">
            <el-option
              v-for="item in keyWordsTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input
            v-model="params.keywords"
            placeholder="输入关键字"
            style="margin-left: 10px; width: 190px"
          ></el-input>
        </div>
      </div>
      <div style="display: flex">
        <div class="btn1" @click="search">查询</div>
        <div class="btn1" @click="clearAll">清空</div>
      </div>
    </div>
    <div class="tableVue">
      <div class="tableList">
        <div class="thVue">
          <div class="th">客户信息</div>
          <div class="th">会话来源</div>
          <div class="th">接待客服</div>
          <div class="th">会话开始时间</div>
          <div class="th">会话结束方式</div>
          <div class="th">客户消息数</div>
          <div class="th">客服消息数</div>
          <div class="th">评价</div>
          <div class="th">评价时间</div>
          <div class="th">操作</div>
        </div>
        <div class="tdVue">
          <div class="tdItem" v-for="(item, index) in list" :key="index">
            <div class="td">
              <div
                style="height: 100%; display: flex; justify-content: center; align-items: center; padding-left: 20px"
              >
                <img :src="item.userAvatar" style="width: 34px; height: 34px; border-radius: 50%" />
                <div
                  style="
                    height: 34px;
                    padding-left: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                  "
                >
                  <span style="line-height: 1; text-align: left; color: #389bf6">{{ item.userName }}</span>
                  <span style="line-height: 1; text-align: left; color: #389bf6">{{ item.userPhone }}</span>
                </div>
              </div>
            </div>
            <div class="td">{{ sources[item.source].label }}</div>
            <div class="td">{{ item.serviceName }}</div>

            <div class="td">{{ item.createTime }}</div>
            <div class="td">{{ item.endTime }}</div>
            <div class="td">{{ item.userMsgCount }}</div>
            <div class="td">{{ item.serviceMsgCount }}</div>
            <div class="td">
              {{ item.evaluationRating == 0 ? '未评价' : evaluationRatings[item.evaluationRating - 1].label }}
            </div>
            <div class="td">{{ item.evaluationTime }}</div>
            <div class="td">
              <!-- <span  style="color: #389bf6; cursor: pointer; font-weight: 600; padding: 0 10px" @click="toChat(item)">发起会话</span> -->
              <span
                style="color: #389bf6; cursor: pointer; font-weight: 600; padding: 0 10px"
                @click="showRecord(item.id, item.userName)"
                >查看消息记录</span
              >
            </div>
          </div>
        </div>
        <div class="paginationVue">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="params.limit"
            @current-change="pageChange"
          ></el-pagination>
        </div>
      </div>
    </div>

    <el-drawer title="" :visible.sync="drawer" direction="rtl">
      <div class="drawerVue">
        <div class="title">与{{ nickName }}的聊天记录</div>
        <div class="chatBody">
          <div class="item" v-for="(item, index) in chatList" :key="index">
            <img src="https://image.yigouxuan.com/crmebimage/public/product/2023/09/25/2dc199805a744324bba6c74af13a8177ck1upnnqkr.png" v-if="item.senderType == 1" style="width: 50px; height: 50px; margin-right: 15px;"/>
            <img src="@/assets/images/service.png" style="width: 50px; height: 50px; border-radius: 4px; margin-right: 15px;" v-if="item.senderType == 2"/>

            <!-- 文本消息 -->
            <div class="content" :class="{active: item.senderType == 2}" v-if="item.contentType == 1">{{ item.content }}</div>

            <!-- 图片消息 -->
            <img :src="item.content" class="img" v-if="item.contentType == 2" @click="handlePreview(item.content)" />

            <!-- 视频消息 -->
            <img :src="item.content" class="img" v-if="item.contentType == 3" />

            <!-- 商品消息 -->
            <div class="product" v-if="item.contentType == 4" @click="handleAudit(item.contentObj.productId, false)">
              <img :src="item.contentObj.image" style="width: 70px; height: 70px; border-radius: 4px" />
              <div
                style="
                  flex: 1;
                  padding-left: 15px;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                "
              >
                <div style="color: #333; font-size: 15px; font-weight: 600; line-height: 1.4">
                  {{ item.contentObj.name }}
                </div>
                <div style="color: #f53f3f; font-size: 15px; font-weight: 600">￥{{ item.contentObj.price }}</div>
              </div>
            </div>

            <!-- 订单消息 -->
            <div class="order" v-if="item.contentType == 5" @click="onOrderDetails(item.contentObj.orderNo)">
              <div class="flex" style="width: 100%; height: 50px; display: flex">
                <img :src="item.contentObj.image" style="width: 50px; height: 50px; border-radius: 4px" />
                <div
                  style="
                    flex: 1;
                    padding-left: 15px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                  "
                >
                  <div style="display: flex; justify-content: space-between; align-items: center">
                    <div class="line-1" style="color: #333; font-size: 15px; font-weight: 600; line-height: 1.4">
                      {{ item.contentObj.name }}
                    </div>
                    <span style="color: #fe3434; font-weight: 600; padding-left: 30px">{{
                      statusArr[item.contentObj.orderStatus]
                    }}</span>
                  </div>
                  <div style="color: #9aa3ae; font-size: 14px; font-weight: 600">
                    共{{ item.contentObj.productCount }}件商品，总价¥{{
                      Number(item.contentObj.price) * item.contentObj.productCount
                    }}
                  </div>
                </div>
              </div>
              <div
                style="
                  width: 100%;
                  height: 45px;
                  display: flex;
                  justify-content: space-between;
                  flex-direction: column;
                  margin-top: 15px;
                "
              >
                <div style="width: 100%; display: flex; justify-content: space-between">
                  <div style="color: #4e5969; font-size: 14px">订单编号</div>
                  <div style="color: #333; font-size: 14px; font-weight: 600">{{ item.contentObj.orderNo }}</div>
                </div>
                <div style="width: 100%; display: flex; justify-content: space-between">
                  <div style="color: #4e5969; font-size: 14px">下单时间</div>
                  <div style="color: #333; font-size: 14px; font-weight: 600">{{ item.createTime }}</div>
                </div>
              </div>
            </div>

            <!-- 售后单消息 -->
            <div class="order" v-if="item.contentType == 6" @click="toOrderDetails(item.contentObj.refundOrderNo)">
              <div class="flex" style="width: 100%; height: 50px; display: flex">
                <img :src="item.contentObj.image" style="width: 50px; height: 50px; border-radius: 4px" />
                <div
                  style="
                    flex: 1;
                    padding-left: 15px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                  "
                >
                  <div style="display: flex; justify-content: space-between; align-items: center">
                    <div class="line-1" style="color: #333; font-size: 15px; font-weight: 600; line-height: 1.4">
                      {{ item.contentObj.name }}
                    </div>
                    <div style="color: #fe3434; font-weight: 600; padding-left: 30px">
                      {{ soldStatusArr[item.contentObj.refundStatus] }}
                    </div>
                  </div>
                  <div style="color: #9aa3ae; font-size: 14px; font-weight: 600">
                    共{{ item.contentObj.productCount }}件商品，总价¥{{
                      Number(item.contentObj.price) * item.contentObj.productCount
                    }}
                  </div>
                </div>
              </div>
              <div
                style="
                  width: 100%;
                  height: 45px;
                  display: flex;
                  justify-content: space-between;
                  flex-direction: column;
                  margin-top: 15px;
                "
              >
                <div style="width: 100%; display: flex; justify-content: space-between">
                  <div style="color: #4e5969; font-size: 14px">订单编号</div>
                  <div style="color: #333; font-size: 14px">{{ item.contentObj.refundOrderNo }}</div>
                </div>
                <div style="width: 100%; display: flex; justify-content: space-between">
                  <div style="color: #4e5969; font-size: 14px">申请时间</div>
                  <div style="color: #333; font-size: 14px">{{ item.createTime }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 商品详情 -->
    <info-from
      ref="infoFrom"
      :componentKey="componentKey"
      :is-atud="isAtud"
      :is-show="isShow"
      :productId="productId"
      @onCloseInfo="dialogVisibleInfo = false"
      fromType="product"
      :dialogVisibleInfoData="dialogVisibleInfo"
    />
    <!-- 订单详情 -->
    <details-from ref="orderDetail" :orderNo="orderNo" />

    <!--售后单详情-->
    <refund-order-detail
      :drawerVisible="drawerVisible"
      :refundOrderNo="refundOrderNo"
      v-if="drawerVisible"
      @onClosedrawerVisible="drawerVisible = false"
    ></refund-order-detail>
  </div>
</template>

<script>
import { getChattingHistory, getChatByOne } from '@/api/msg';
import infoFrom from '@/components/productInfo';
import detailsFrom from '@/components/OrderDetail';
import RefundOrderDetail from '@/components/refundOrderDetail.vue';
export default {
  components: {
    infoFrom,
    detailsFrom,
    RefundOrderDetail,
  },
  data() {
    return {
      sources: [
        { value: 0, label: '普通咨询' },
        { value: 1, label: '商品咨询' },
        { value: 2, label: '订单咨询' },
        { value: 3, label: '售后单咨询' },
      ],
      evaluationRatings: [
        { value: 1, label: '1星' },
        { value: 2, label: '2星' },
        { value: 3, label: '3星' },
        { value: 4, label: '4星' },
        { value: 5, label: '5星' },
      ],
      dateTypes: [
        { value: 'queueStartTime', label: '排队开始时间' },
        { value: 'sessionStartTime', label: '会话开始时间' },
        { value: 'sessionEndTime', label: '会话结束时间' },
        { value: 'evaluationTime', label: '客户评价时间' },
      ],
      keyWordsTypes: [
        { value: 'userNickname', label: '客户昵称' },
        { value: 'userPhone', label: '客户手机号码' },
        { value: 'serviceName', label: '接待客服' },
      ],
      value: '',
      list: [],
      total: 0,
      params: {
        endTime: '',
        evaluationRating: '',
        keywordType: '',
        keywords: '',
        limit: 20,
        page: 1,
        source: '',
        startTime: '',
        timeType: '',
        userId: '',
      },
      daterange: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      drawer: false,
      chatList: [],
      nickName: "",
      dialogVisibleInfo: false,
      isShow: false,
      isAtud: false,
      componentKey: 0,
      productId: '',
      orderNo: '',
      refundOrderNo: '',
      drawerVisible: false,
      previewVisible: false,
      statusArr: [
        '待支付',
        '待发货',
        '部分发货',
        '待核销',
        '待收货',
        '已收货',
        '已完成',
        '',
        '',
        '已取消',
        '待配送',
        '配送中',
        '已送达',
      ],
      soldStatusArr: ['待审核', '商家拒绝', '退款中', '已退款', '用户退货', '商家待收货', '已撤销'],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 查看商品详情
    handleAudit(id, c) {
      this.productId = id;
      this.isShow = true;
      this.isAtud = c;
      this.componentKey += 1;
      this.dialogVisibleInfo = true;
    },

    // 订单详情
    onOrderDetails(id) {
      console.log(id);
      this.orderNo = id;
      this.$nextTick(() => {
        this.$refs.orderDetail.getDetail(id);
        this.$refs.orderDetail.getOrderInvoiceList(id);
        this.$refs.orderDetail.dialogVisible = true;
      });
    },
     // 售后单详情
     toOrderDetails(refundOrderNo) {
      this.refundOrderNo = refundOrderNo;
      this.drawerVisible = true;
    },
    pageChange(e) {
      console.log(e);
      this.params.page = e;
      this.getList();
    },
    getList() {
      getChattingHistory(this.params).then((res) => {
        this.list = res.list;
        this.total = res.total;
      });
    },
    search() {
      this.params.startTime = this.dateFormat(this.daterange[0]);
      this.params.endTime = this.dateFormat(this.daterange[1]);
      console.log(this.params);
      this.params.page = 1;
      this.getList();
    },
    dateFormat(value) {
      if (value == null || value == undefined || value == '') return null;
      let date = new Date(value);
      console.log(date);
      let year = date.getFullYear();
      let month = date.getMonth() + 1 >= 10 ? date.getMonth(): '0' + (date.getMonth() + 1);
      let day = date.getDay() >= 10 ? date.getDay() : '0' + date.getDay();
      console.log(year, month, day);
      return `${year}-${month}-${day}`;
    },
    showRecord(conversationId, nickName) {
        this.drawer = true;
      this.nickName = nickName
      getChatByOne({
        conversationId: conversationId,
      }).then((res) => {
        this.$nextTick(()=>{
            this.chatList = res;
            
            console.log('列表', this.chatList);
        })
      });
    },
    clearAll() {
      this.params = {
        endTime: '',
        evaluationRating: '',
        keywordType: '',
        keywords: '',
        limit: 15,
        page: 1,
        source: '',
        startTime: '',
        timeType: '',
        userId: '',
      };
      this.daterange = [];
      this.getList();
    },
    toChat(item) {
      this.$store.commit('SET_CURRENTCHAT', item);
      let form = {
        conversationId: item.id, // 会话ID
        page: 1, //页码
        limit: 50, //每页数量
        userId: item.userId,
      };
      // 获取聊天记录
      this.$store.dispatch('getHistory', form).then((res) => {
        console.log(res);
        this.$router.push({
          name: 'ServicesIndex',
        });
      });
    },
  },
};
</script>

<style lang="scss">
.recordPage {
  width: 100%;
  height: calc(100vh - 186px);
  background: #fff;
  .el-drawer .el-drawer__body {
    padding: 0 !important;
  }
  .drawerVue {
    width: 100%;
    height: calc(100vh);
    background: #f5f5f5;
    .title {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #000;
      font-weight: 600;
      font-size: 14px;
    }
    .chatBody {
      width: 100%;
      height: calc(100vh - 50px);
      overflow-y: scroll;
      .item {
        width: 100%;
        display: flex;
        padding: 0 20px 20px 20px;
        .content {
          max-width: 60%;
          border-radius: 0 15px 15px 15px;
          color: #333;
          background: #fff;
          padding: 15px;
          line-height: 1.4;
        }
        .active {
            background: #2561ef;
            color: #fff;
        }
        .img {
          max-width: 100%;
          height: auto;
          cursor: pointer;
          border-radius: 4px;
        }
        video {
          max-width: 300px;
          height: auto;
        }
        .product {
          width: 60%;
          height: 100px;
          border-radius: 0 15px 15px 15px;
          background: #fff;
          padding: 15px;
          display: flex;
          cursor: pointer;
        }
        .order {
          width: 60%;
          height: 140px;
          border-radius: 0 15px 15px 15px;
          background: #fff;
          padding: 15px;
          cursor: pointer;
        }
      }
    }
    .chatBody::-webkit-scrollbar {
      width: 0;
    }
  }
  .filterVue {
    width: 100%;
    height: 62px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    .filter {
      display: flex;
      align-items: center;
      padding-right: 30px;
    }
    .btn1 {
      width: 60px;
      height: 32px;
      border-radius: 4px;
      line-height: 32px;
      text-align: center;
      background: #2561ef;
      color: #fff;
      margin-right: 10px;
      cursor: pointer;
    }
  }
  .tableVue {
    flex: 1;
    height: calc(100vh - 186px - 62px);
    .thVue {
      width: 100%;
      display: flex;
      height: 70px;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      .th {
        flex: 1;
        color: #333333;
        font-weight: 600;
        text-align: center;
      }
      .th:nth-last-child(1) {
        width: 250px;
      }
    }
    .tdVue {
      width: 100%;
      height: calc(100vh - 186px - 62px - 70px - 60px);
      overflow-y: scroll;
      .tdItem {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        .td {
          flex: 1;
          text-align: center;
        }
        .td:nth-last-child(1) {
          width: 250px;
        }
      }
    }
    .tdVue::-webkit-scrollbar {
      width: 0;
    }
    .paginationVue {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>